<template>
  <div id="SearchPicturePage">
    <h2 style="margin-bottom: 16px">以图搜图</h2>
    <h3 style="margin-bottom: 16px">原图</h3>
    <a-card hoverable style="width: 240px">
      <template #cover>
        <img
          :alt="picture.name"
          :src="picture.thumbnailUrl ?? picture.url"
          style="height: 180px"
          object-fit="cover"
        />
      </template>
      <a-card-meta :title="picture.name"> </a-card-meta>
    </a-card>
    <h3 style="margin: 16px 0">识图结果</h3>
    <!-- 图片结果列表 -->
    <!-- 图片列表 -->
    <a-list
      :grid="{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }"
      :data-source="dataList"
      :loading="loading"
    >
      <template #renderItem="{ item }">
        <a :href="item.imgUrl" target="_blank">
          <a-list-item style="padding: 0">
            <a-card hoverable>
              <template #cover>
                <img
                  :alt="picture.name"
                  :src="item.imgUrl"
                  style="height: 180px"
                  object-fit="cover"
                />
              </template>
            </a-card>
          </a-list-item>
        </a>
      </template>
    </a-list>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import { getPictureVoByIdUsingGet } from '@/api/pictureController'
import { message } from 'ant-design-vue'
import { useRoute } from 'vue-router'
import { searchPictureByPictureIsSoUsingPost } from '@/api/pictureController'
const loading = ref(true)
const picture = ref<API.PictureVO>({})
const route = useRoute()
const pictureId = computed(() => {
  return route.query?.pictureId
})

//获取老数据
const fetchPictureDetail = async () => {
  try {
    const res = await getPictureVoByIdUsingGet({ id: pictureId.value })
    if (res.data.code === 200 && res.data.data) {
      const data = res.data.data
      picture.value = data
    } else {
      message.error('获取图片详情失败或' + res.data.message)
    }
  } catch (err) {
    message.error('获取图片详情失败' + err)
  }
}

//获取以图搜图的list列表
const dataList = ref<API.ImageSearchResult[]>([])
const fetchResultData = async () => {
  try {
    const res = await searchPictureByPictureIsSoUsingPost({ pictureId: pictureId.value })
    if (res.data.code === 200 && res.data.data) {
      const data = res.data.data
      dataList.value = data
      loading.value = false
    } else {
      message.error('获取图片失败或' + res.data.message)
    }
  } catch (err) {
    message.error('获取图片失败' + err)
  }
}
//页面加载时获取数据
onMounted(() => {
  fetchPictureDetail()
  fetchResultData()
})
</script>
<style scoped>
#SearchPicturePage {
}
</style>

